<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
         <ul>
			 <li v-for="p in persons" :key="p.id">
				 {{p.name}}-{{p.age}}
			</li>
		 </ul>
		 <ul>
			<li v-for="(value,key) in car" :key="key">
				{{key}}-{{value}}
		   </li>
		</ul>
		<ul>
			<li v-for="(char,index) in str" :key="index">
				{{char}}-{{index}}
		   </li>
		</ul>
		<ul>
			<li v-for="(char,index) in 10" :key="index">
				{{char}}-{{index}}
		   </li>
		</ul>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#root',
				data:{
                  persons:[
					  {
						  id:001,
						  name:"123",
						  age:1,
					  },
					  {
						  id:002,
						  name:"456",
						  age:2,
					  },
					  {
						  id:003,
						  name:"789",
						  age:3,
					  }
				  ],
				  car:{
					  name:"aodi",
					  age:"12"
				  },
				  str:"12345"
				}
			})

		</script>
	</body>
</html>

